<script setup lang="ts" >
import { Calendar, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import Dialog from './components/Dialog.vue'
import { register, login } from '../../api/login.js'
import {  useRouter} from 'vue-router'
const router= useRouter()
//控制展示第几个
const activeName = ref('first')
//表单数据
interface formType {
  account: number
  password: string
  repassword?: string
}
const formData: formType = reactive({
  //   account: null,
  // password: ''
  account: 123456,
  password: 'w123456'
})

const registerData: formType = reactive({
  account: null,
  password: '',
  repassword: ''
})
const forgetDialog = ref()
const openDio = () => {
  forgetDialog.value.openDiaLog()
}
//跳转注册
const goRegister = () => { activeName.value = 'second' }
//注册接口
const registerInfo = async () => {
  // 首先判断两次密码是否一致
  if (registerData.password == registerData.repassword) {
    const res = await register(registerData)
    // 测试
    // console.log(res);
    if (res.data.message == "注册账号成功") {
      ElMessage({
        message: `注册账户成功`,
        type: 'success',
      })
      //注册成功跳转登录界面
      activeName.value = 'first'
    } else {
      ElMessage.error('注册失败，请检查数据')
    }
  } else {
    ElMessage.error('注册失败-两次密码不一致')
  }

}
//登录接口
const loginInfo = async () => {
  const res = await login(formData)
  // console.log(res);
  const {token}=res.data
  if(res.data.message== "登录成功"){
       ElMessage({
      message: `登录账户成功`,
      type: 'success',
    })
    //把token存到本地
    localStorage.setItem('token', token)
    //跳转首页
    router.push('/home')
  }else{
     ElMessage.error('登录失败')
  }
}
</script>

<template class="bodyBg">
  <div class="login_Info">
    <el-container>
      <el-header class="header-warpped">
        <div class="header-content">
          <h2>后台管理系统</h2>
          <span class="welcome">欢迎登录！<svg t="1699976987799" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="6951" width="25" height="25">
              <path
                d="M952.32 34.133333c-1.706667 1.706667-39.253333 22.186667-110.933333 42.666667-68.266667 20.48-179.2 44.373333-329.386667 44.373333S250.88 97.28 182.613333 78.506667C110.933333 56.32 73.386667 35.84 71.68 34.133333L11.946667 0l1.706666 68.266667c1.706667 148.48 22.186667 286.72 61.44 411.306666 32.426667 104.106667 78.506667 197.973333 136.533334 281.6 104.106667 148.48 221.866667 223.573333 283.306666 254.293334l17.066667 8.533333 17.066667-8.533333c61.44-30.72 179.2-105.813333 283.306666-254.293334 58.026667-81.92 104.106667-177.493333 136.533334-281.6 39.253333-122.88 59.733333-261.12 61.44-411.306666l1.706666-68.266667-59.733333 34.133333z m-819.2 325.973334c155.306667-117.76 279.893333 0 279.893333 0-158.72 145.066667-279.893333 0-279.893333 0zM512 981.333333c0-1.706667 0-1.706667 0 0-1.706667 0-1.706667-56.32-1.706667-138.24 155.306667-100.693333 180.906667-206.506667 180.906667-206.506666H512v-477.866667C815.786667 158.72 972.8 68.266667 972.8 68.266667c-8.533333 628.053333-348.16 855.04-460.8 913.066666zM512 981.333333z"
                fill="#707070" p-id="6952"></path>
            </svg></span>

        </div>
      </el-header>
      <el-main>
        <div class="login-warpped">
          <el-card class="box-card">
            <el-tabs type="card" class="demo-tabs" v-model="activeName" stretch>
              <el-tab-pane label="登录" name="first">
                <template #label>
                  <span class="custom-tabs-label">
                    <el-icon>
                      <calendar />
                    </el-icon>
                    <span>登录</span>
                  </span>
                </template>
                <!--  -->
                <el-form :model="formData" class="login_form">
                  <el-form-item label="账号：">
                    <el-input v-model="formData.account" placeholder="请输入账号"></el-input>
                  </el-form-item>
                  <el-form-item label="密码：">
                    <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
                  </el-form-item>
                </el-form>
                <!--  -->
                <div class="footer_wapper">
                  <div class="forget">
                    <span @click="openDio">忘记密码</span>
                  </div>
                  <div class="footer_btn">
                    <el-button type="primary" @click="loginInfo">登录</el-button>
                  </div>
                  <div class="toRegister">
                    还没有账号?<span @click="goRegister">去注册</span>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="注册" name="second" v-model="activeName">
                <template #label>
                  <span class="custom-tabs-label">
                    <el-icon>
                      <User />
                    </el-icon>
                    <span>注册</span>
                  </span>
                </template>
                <!--  注册页-->
                <el-form :model="registerData" class="register_form">
                  <el-form-item label="账号：">
                    <el-input v-model="registerData.account" placeholder="请输入账号6-12位"></el-input>
                  </el-form-item>
                  <el-form-item label="密码：">
                    <el-input v-model="registerData.password" placeholder="请输入密码6-12位"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码：">
                    <el-input v-model="registerData.repassword" placeholder="请确认密码"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" style="background-color: skyblue; margin: 0 auto;"
                      @click="registerInfo">注册</el-button>
                  </el-form-item>
                </el-form>

              </el-tab-pane>

            </el-tabs>
          </el-card>
        </div>
      </el-main>
      <el-footer class="footer-warpped">
        <div class="footer-content">
          <div class="title">
            <span>
              <svg t="1699977721638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="16224" width="20" height="20">
                <path
                  d="M490.496 1014.784c-144.384-126.464-227.328-308.736-227.328-500.224 0-192.512 83.456-375.808 228.864-501.76l41.984 48.128c-131.584 114.176-206.848 279.552-206.848 453.632 0 173.056 74.752 337.92 205.312 452.096l-41.984 48.128z"
                  fill="#13227a" p-id="16225"></path>
                <path
                  d="M529.408 1014.784l-41.984-48.128c130.56-114.176 205.312-279.04 205.312-452.096 0-174.08-75.264-339.456-206.848-453.632l41.984-48.128c145.408 126.464 228.864 309.248 228.864 501.76 0 192-82.432 374.272-227.328 500.224z"
                  fill="#13227a" p-id="16226"></path>
                <path
                  d="M67.584 480.768c1.024-15.872 3.072-31.744 5.632-47.104 37.888-212.48 222.208-366.592 438.272-366.592 182.784 0 346.112 111.616 413.696 279.552H993.28c-70.144-204.8-263.68-343.04-481.28-343.04C264.704 3.584 53.76 179.712 10.752 422.912 5.632 452.608 2.56 482.816 2.56 513.024v31.744h953.856c-1.024 16.384-3.072 32.768-6.144 49.152-38.912 210.944-223.232 364.032-438.272 364.032-185.344 0-349.696-113.664-415.744-285.184H28.16C97.28 882.176 291.84 1022.464 512 1022.464c245.76 0 456.704-175.104 500.736-416.768 5.632-30.208 8.192-61.44 8.192-92.672V481.28H67.584z"
                  fill="#13227a" p-id="16227"></path>
              </svg>
              <i> 联系我们</i>
            </span> |
            <span>
              <svg t="1699977246954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="10950" width="20" height="20">
                <path
                  d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z"
                  fill="#707070" p-id="10951"></path>
                <path
                  d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z"
                  fill="#707070" p-id="10952"></path>
              </svg>
              <i> 京备案号123443</i>
            </span> |
            <span>
              <svg t="1699977513544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="12175" width="20" height="20">
                <path
                  d="M689.067 379.733l55.466-96c19.2 2.134 38.4-6.4 49.067-25.6 12.8-23.466 6.4-53.333-19.2-68.266-23.467-12.8-53.333-6.4-68.267 19.2-10.666 17.066-8.533 38.4 2.134 53.333l-53.334 93.867c-27.733-14.934-59.733-25.6-91.733-32C509.867 305.067 460.8 256 460.8 256s-32 57.6-85.333 91.733c-6.4 2.134-14.934 6.4-21.334 10.667l-55.466-93.867c10.666-14.933 12.8-36.266 2.133-53.333-12.8-23.467-42.667-32-66.133-19.2s-32 44.8-19.2 68.267c10.666 17.066 29.866 25.6 49.066 25.6l55.467 96c-68.267 49.066-113.067 128-113.067 215.466 0 134.4 104.534 245.334 243.2 268.8 14.934-12.8 34.134-19.2 55.467-19.2s40.533 6.4 55.467 19.2c136.533-23.466 241.066-134.4 241.066-268.8 0-89.6-44.8-166.4-113.066-217.6zM505.6 708.267c-61.867 0-110.933-49.067-110.933-110.934 0-61.866 49.066-110.933 110.933-110.933s110.933 49.067 110.933 110.933c0 59.734-51.2 110.934-110.933 110.934z m59.733-128c2.134 4.266 2.134 10.666 2.134 14.933 0 34.133-27.734 61.867-61.867 61.867-34.133 0-61.867-27.734-61.867-61.867 0-34.133 27.734-61.867 61.867-61.867h2.133c-4.266 6.4-6.4 12.8-6.4 21.334 0 21.333 17.067 36.266 36.267 36.266 10.667 2.134 21.333-2.133 27.733-10.666zM908.8 501.333l-29.867-8.533c-6.4-66.133-32-128-68.266-179.2l-27.734 29.867c36.267 53.333 57.6 119.466 57.6 187.733v46.933c0 168.534-125.866 309.334-290.133 332.8-8.533-17.066-25.6-27.733-44.8-27.733-27.733 0-49.067 21.333-49.067 49.067 0 27.733 21.334 49.066 49.067 49.066 21.333 0 38.4-12.8 46.933-32C695.467 932.267 812.8 834.133 857.6 701.867l49.067-12.8c23.466-6.4 42.666-29.867 42.666-55.467v-81.067c2.134-21.333-17.066-44.8-40.533-51.2zM132.267 492.8l-29.867 8.533c-23.467 6.4-42.667 29.867-42.667 55.467v81.067c0 25.6 19.2 49.066 42.667 55.466L149.333 704c10.667 2.133 19.2-4.267 19.2-14.933V533.333c0-70.4 21.334-134.4 57.6-187.733L198.4 315.733C162.133 364.8 138.667 426.667 132.267 492.8zM582.4 281.6c-6.4-2.133-12.8-6.4-14.933-12.8L539.733 128l-32 93.867c-2.133 6.4-6.4 10.666-14.933 10.666-6.4 0-12.8-2.133-17.067-6.4l-36.266-49.066L411.733 224c0 6.4-6.4 10.667-12.8 10.667h-68.266v-34.134h57.6l36.266-61.866c4.267-6.4 8.534-10.667 14.934-10.667 6.4 0 10.666 2.133 14.933 6.4l32 42.667 40.533-123.734c2.134-6.4 10.667-12.8 17.067-12.8 8.533 0 14.933 6.4 17.067 12.8l32 160 23.466-38.4c4.267-2.133 8.534-4.266 14.934-4.266h44.8V204.8H640l-40.533 68.267c-4.267 4.266-8.534 8.533-14.934 8.533H582.4z m0 0"
                  fill="#F15533" p-id="12176"></path>
              </svg>
              <i>阿里云</i>
            </span> |
            <span>
              <svg t="1699977557034" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="13490" width="20" height="20">
                <path
                  d="M512 580.266667c-2.133333 0-4.266667 0-4.266667-2.133334L277.333333 465.066667c-4.266667-2.133333-6.4-8.533333-4.266666-14.933334 2.133333-4.266667 8.533333-6.4 14.933333-4.266666L512 556.8l224-113.066667c4.266667-2.133333 10.666667 0 14.933333 4.266667 2.133333 4.266667 0 10.666667-4.266666 14.933333l-230.4 115.2c0 2.133333-2.133333 2.133333-4.266667 2.133334z"
                  fill="#ED1E79" p-id="13491"></path>
                <path
                  d="M512 866.133333c-6.4 0-10.666667-4.266667-10.666667-10.666666V569.6c0-6.4 4.266667-10.666667 10.666667-10.666667s10.666667 4.266667 10.666667 10.666667v285.866667c0 6.4-4.266667 10.666667-10.666667 10.666666z"
                  fill="#ED1E79" p-id="13492"></path>
                <path
                  d="M742.4 981.333333c-2.133333 0-4.266667 0-4.266667-2.133333L512 868.266667 288 981.333333H277.333333L49.066667 870.4c-4.266667 0-6.4-4.266667-6.4-8.533333V569.6c0-4.266667 2.133333-8.533333 6.4-8.533333L273.066667 448V168.533333c0-4.266667 2.133333-8.533333 6.4-8.533333l230.4-115.2c2.133333-2.133333 6.4-2.133333 8.533333 0L746.666667 157.866667c4.266667 2.133333 6.4 6.4 6.4 8.533333V448l224 110.933333c4.266667 2.133333 6.4 6.4 6.4 8.533334v292.266666c0 4.266667-2.133333 8.533333-6.4 10.666667L746.666667 981.333333h-4.266667zM512 844.8c2.133333 0 4.266667 0 4.266667 2.133333L740.266667 960 960 855.466667V576l-224-110.933333c-4.266667-2.133333-6.4-6.4-6.4-8.533334V174.933333L512 66.133333 294.4 174.933333v279.466667c0 4.266667-2.133333 8.533333-6.4 8.533333L64 576v279.466667L281.6 960l224-113.066667c2.133333-2.133333 4.266667-2.133333 6.4-2.133333zM281.6 454.4z"
                  fill="#108EE9" p-id="13493"></path>
              </svg>
              <i> 稀土掘金</i>

            </span>
          </div>

        </div>
      </el-footer>
    </el-container>
  </div>
  <!-- 忘记密码对话框 -->
  <Dialog ref="forgetDialog"></Dialog>
</template>

<style scoped lang="scss">
.login_Info {
  background: linear-gradient(90deg, #1C3E49 0%, #A43931 100%);
  height: 100vh;
  width: 100vw;

  .header-warpped {

    margin-top: 20px;


    .header-content {

      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;

      h2 {
        font-weight: 800;
        font-size: 20px;
        font-family: 'Courier New', Courier, monospace;
      }

      .welcome {
        font-size: 18px;
      }

    }

  }


  .el-main {
    background-image: url('../../assets/loginBg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 600px;
    --el-main-padding: 0; //边距去掉

    .login-warpped {
      width: 1200px;
      height: 600px;
      margin: 0 auto;

      .box-card {
        width: 380px;
        height: 375px;
        position: relative;
        top: 14%;
        float: right;
        box-shadow: rgb(225, 118, 118) 0px 0px 30px; //将h-shadow,v-shadow设为0px,实现四周阴影

        .footer_wapper {
          display: flex;
          flex-direction: column;

          .forget {
            display: flex;
            justify-content: flex-end;
            color: #c45656;
            font-size: 15px;
            cursor: pointer;
          }

          .footer_btn {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 10px;
          }

          .toRegister {
            display: flex;
            margin-top: 10px;
            justify-content: center;

            span {
              color: #6b778c;
              cursor: pointer;
            }
          }
        }

        .register_form {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-right: 0px;
        }


      }
    }
  }

  // ------------------
  .footer-warpped {
    margin-top: 10px;

    .footer-content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;

      .title {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        span {
          color: #b63c3c;
          margin-left: 10px;

          display: flex;
          align-items: center;
          flex-wrap: nowrap;

          i {
            margin-left: 10px;
            background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }



        }


      }
    }
  }

  .demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
  }

  .demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
  }

  :deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active) {
    border-bottom-color: #b34040;
  }

  :deep(.el-tabs--card>.el-tabs__header .el-tabs__item) {
    border-bottom: 3px solid transparent;
  }

  :deep(.el-tabs__item.is-active) {
    color: #c45656;
  }

  :deep(.el-tabs__item:hover) {
    color: #fd8403;
  }

  .el-form {
    margin-top: 30px;

  }

  :deep(.el-form .el-form-item .el-form-item__label) {
    line-height: 40px;
    height: 40px;

  }

  //登录按钮
  :deep(.el-button) {
    width: 300px;
    height: 45px;
    background-color: #b63c3c;
    font-size: 15px;
  }

  :deep(.el-input__inner) {
    height: 40px;
  }
}
</style>